<template>
  <div class="container">
    <el-form :model="addinfo" :rules="rules" ref="addForm">
      <div class="search-top">
        <el-form-item class="search-item"  prop="location" label="库区">
          <el-cascader  id="seeyou"   @change="choosechange" style="width:100%"  v-model="addinfo.location" :placeholder="seeyou" :options="warehouse" :props="props"></el-cascader>
        <!-- <el-select v-model="addinfo.warehouse" style="width:100%">
          <el-option v-for="item,index in warehouse" :key="index"  :value="item.value" :label="item.name"/>
        </el-select> -->
        </el-form-item>
        <el-form-item class="search-item" label="库位编码"><el-input :disabled="addinfo.code!==''" v-model="addinfo.code"/></el-form-item>
        <el-form-item class="search-item" prop="name" label="库位名称"><el-input v-model="addinfo.name" placeholder="请输入"/></el-form-item>
        <el-form-item class="search-item" prop="temperatureType" label="温度类型">
        <el-select v-model="addinfo.temperatureType" style="width:100%">
          <el-option v-for="item,index in temperatureType" :key="index"  :value="item.value" :label="item.label"/>
        </el-select>
        </el-form-item>
      </div>
      <div class="search-second">
        <el-form-item class="search-item" prop="bearingType" label="承重类型">
        <el-select v-model="addinfo.bearingType" style="width:100%">
          <el-option v-for="item,index in bearingType" :key="index"  :value="item.value" :label="item.label"/>
        </el-select>
        </el-form-item>
        <el-form-item class="search-item" prop="useType" label="用途属性">
        <el-select v-model="addinfo.useType" style="width:100%">
          <el-option v-for="item,index in useType" :key="index"  :value="item.value" :label="item.label"/>
        </el-select>
        </el-form-item>
        <el-form-item class="search-item radio-item" prop="status" label="停用状态">
              <el-radio v-model="addinfo.status"  :label="0">停用</el-radio>
              <el-radio v-model="addinfo.status"  :label="1">启用</el-radio>
        </el-form-item>
      </div>
      <div class="search-down search-top">
        <el-form-item class="search-item" prop="maxVolume" label="承载体积">
          <el-input v-model="addinfo.maxVolume" placeholder="请输入">
             <i slot="suffix" style="font-size: 8px;padding: 13px 12px 11px 12px ;margin-right: -5px;margin-buttom:-5px;background: #a9a1a1;border-radius: 5px;"><span>m³</span></i>
          </el-input>
        </el-form-item>
        <el-form-item class="search-item" label="承载上限">
          <el-input v-model="addinfo.maxNum" placeholder="请输入">
             <i slot="suffix" style="font-size: 8px;padding: 13px 12px 11px 12px ;margin-right: -5px;margin-buttom:-5px;background: #a9a1a1;border-radius: 5px;"><span>个</span></i>
          </el-input>
        </el-form-item>
        <el-form-item class="search-item" label="承载重量">
          <el-input v-model="addinfo.maxWeight" placeholder="请输入">
             <i slot="suffix" style="font-size: 8px;padding: 13px 12px 11px 12px ;margin-right: -5px;margin-buttom:-5px;background: #a9a1a1;border-radius: 5px;"><span>Kg</span></i>
          </el-input>
        </el-form-item>
      </div>
      <div class="search-down search-top down">
        <el-form-item class="search-item pailieceng" label="库位排/列/层">
          <el-input v-model="addinfo.locationRow" placeholder="请输入"/>
          <el-input v-model="addinfo.locationColumn" placeholder="请输入"/>
          <el-input v-model="addinfo.locationLayer" placeholder="请输入"/>
        </el-form-item>
        <el-form-item class="search-item changkuangao" style="margin-left:20px" label="库位长/宽/高">
          <el-input v-model="addinfo.locationLength" placeholder="请输入">
             <i slot="suffix" style="font-size: 8px;padding: 13px 12px 11px 12px ;margin-right: -5px;margin-buttom:-5px;background: #a9a1a1;border-radius: 5px;"><span>cm</span></i>
          </el-input>
          <el-input v-model="addinfo.locationWidth" placeholder="请输入">
             <i slot="suffix" style="font-size: 8px;padding: 13px 12px 11px 12px ;margin-right: -5px;margin-buttom:-5px;background: #a9a1a1;border-radius: 5px;"><span>cm</span></i>
          </el-input>
          <el-input v-model="addinfo.locationHigh" placeholder="请输入">
             <i slot="suffix" style="font-size: 8px;padding: 13px 12px 11px 12px ;margin-right: -5px;margin-buttom:-5px;background: #a9a1a1;border-radius: 5px;"><span>cm</span></i>
          </el-input>
        </el-form-item>
      </div>
      <div class="Btn">
        <el-button class="btn1" @click="backFn">返回</el-button>
        <el-button class="btn2" @click="submit">提交</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { getCode, warehouse, area, add, detail, put } from '@/api/kwgl'

export default {
  name: 'kwgl-add',
  async created () {
    const { data: warehouselist } = await warehouse()
    console.log('仓库列表', warehouselist)
    this.warehouse = warehouselist
    console.log('路由传参id', this.$route.query.id)
    if (this.$route.query.id) {
      // console.log(this.$refs.seeyou)
      const input = document.querySelector('#seeyou')
      input.classList.add('seeyou')
      this.seeyou = `${this.$route.query.warehouseName}/${this.$route.query.areaName}`
      const { data: detailinfo } = await detail(this.$route.query.id)
      console.log('根据路由id请求到的数据', detailinfo)
      console.log('本地的原始数据', this.addinfo)
      this.addinfo = detailinfo
      // console.log(this.addinfo.location)
      if (!this.addinfo.location) {
        this.$set(this.addinfo, 'location', [detailinfo.warehouseId, detailinfo.areaId])
        // this.addinfo.location = [detailinfo.warehouseId, detailinfo.areaId]
        console.log('添加location之后的数据', this.addinfo)
      }
    } else {
      const { data: code } = await getCode()
      this.addinfo.code = code
    }
  },
  mounted () {
    // console.log(this.$refs.areainfo111)
  },
  data () {
    return {
      // isshow: true,
      seeyou: '' || '请输入', // 回显的字段
      // warehouse: [], // 存放启用仓库的列表(第一个级联选择器的数据未知)
      warehouse: [{ id: '798976929725153313', createTime: '2022-12-13 18:09:05', createUser: '0', updateTime: '2022-12-14 00:00:14', updateUser: '0', code: 'CK000001', name: '1号仓库', type: 'ZZ', location: '北京市/市辖区/昌平区', province: '110000', city: '119900', area: '110114', address: '金燕龙写字楼一层', surface: '1000.00', personId: null, personName: '万宝宝', phone: '18532363332', includedNum: 7, status: 1, remark: '', createName: '刘世娟', updateName: '刘世娟', logicDel: 1 }, { id: '798977092237656129', createTime: '2022-12-13 18:09:43', createUser: '0', updateTime: '2022-12-14 00:00:14', updateUser: '0', code: 'CK000002', name: '2号仓库', type: 'JG', location: '山西省/太原市/小店区', province: '140000', city: '140100', area: '140105', address: '迎泽大街万福小区', surface: '2000.00', personId: null, personName: '王丽丽', phone: '13622114421', includedNum: 5, status: 1, remark: '', createName: '刘世娟', updateName: '刘世娟', logicDel: 1 }, { id: '1052379943406685153', createTime: '2022-12-14 00:22:11', createUser: '0', updateTime: '2022-12-14 00:31:52', updateUser: '0', code: 'CK005938', name: '25122', type: ' JG', location: '"北京市/市辖区/东城区"', province: '北京市', city: '市辖区', area: '东城区', address: '258', surface: '85.00', personId: null, personName: '111', phone: '1895895456165', includedNum: 0, status: 1, remark: '', createName: '刘世娟', updateName: null, logicDel: 1 }, { id: '1052382473058536513', createTime: '2022-12-14 00:32:14', createUser: '0', updateTime: '2022-12-14 00:49:49', updateUser: '0', code: 'CK005913', name: '上的分布', type: 'JG', location: '"140000/140400/140405"', province: '140000', city: '140405', area: '140400', address: '', surface: null, personId: null, personName: '所发生的吧', phone: '', includedNum: 0, status: 1, remark: '', createName: '刘世娟', updateName: null, logicDel: 1 }, { id: '1052386942068477121', createTime: '2022-12-14 00:50:00', createUser: '0', updateTime: '2022-12-14 00:50:00', updateUser: '0', code: 'CK005942', name: '222', type: 'JG', location: '河北省/唐山市/路北区', province: '130000', city: '130200', area: '130203', address: '3', surface: null, personId: null, personName: '3', phone: '', includedNum: 0, status: 1, remark: '', createName: '刘世娟', updateName: '刘世娟', logicDel: 1 }, { id: '1052386985005567201', createTime: '2022-12-14 00:50:10', createUser: '0', updateTime: '2022-12-14 00:50:10', updateUser: '0', code: 'CK005943', name: '2', type: 'ZZ', location: '河北省/唐山市/路北区', province: '130000', city: '130200', area: '130203', address: '', surface: null, personId: null, personName: '6', phone: '', includedNum: 0, status: 1, remark: '', createName: '刘世娟', updateName: '刘世娟', logicDel: 1 }, { id: '1052387039372135681', createTime: '2022-12-14 00:50:23', createUser: '0', updateTime: '2022-12-14 00:50:23', updateUser: '0', code: 'CK005944', name: '99', type: 'CB', location: '内蒙古自治区/乌海市/乌达区', province: '150000', city: '150300', area: '150304', address: '', surface: null, personId: null, personName: '9', phone: '', includedNum: 0, status: 1, remark: '', createName: '刘世娟', updateName: '刘世娟', logicDel: 1 }], // 存放启用仓库的列表(第一个级联选择器的数据未知)
      props: { // 1库区级联选择器的设置
        lazy: true,
        value: 'id',
        label: 'name',
        leaf: 'warehouseId',
        // expandTrigger: 'hover',
        lazyLoad: async (node, resolve) => {
          console.log('懒加载回显v-model的值', this.addinfo.location, '此时的以及仓库列表', this.warehouse)
          // if (this.$route.query.id) {
          //   // this.$forceUpdate()
          //   console.log(this.addinfo.warehouseId)
          //   const { data } = await area(this.addinfo.warehouseId)
          //   resolve(data)
          // } else
          if (node.value) {
            console.log('node节点', node)
            const { data } = await area(node.value)
            console.log('懒加载请求到的数据', data)

            resolve(data)
          }
        }

      },
      // area: '', // 暂存地区code的数组
      temperatureType: [{ // 温度类型
        value: 'CW',
        label: '常温'
      }, {
        value: 'LC',
        label: '冷藏'
      }, {
        value: 'HW',
        label: '恒温'
      }],
      useType: [{ // 使用类型
        value: 'RKHCQ',
        label: '入库缓存区'
      }, {
        value: 'CKHCQ',
        label: '出库缓存区'
      }, {
        value: 'CCQ',
        label: '存储区'
      }, {
        value: 'FJQ',
        label: '分拣区'
      }, {
        value: 'ZJQ',
        label: '质检区'
      }],
      bearingType: [{ // 承重类型
        value: 'ZX',
        label: '重型'
      }, {
        value: 'QX',
        label: '轻型'
      }, {
        value: 'BX',
        label: '中型'
      }],

      addinfo: { // add的data
        areaId: '', // 最后一项的库区id
        // location: ['798976929725153313', '798977619574915265'], // 完成的仓库/库区数组
        location: null, // 完成的仓库/库区数组
        warehouseId: '', // 仓库id
        name: '', // 库位名称
        code: '', // 库位编码
        temperatureType: '', // 温度
        bearingType: '', // 承重
        useType: '', // 使用
        status: '', // 状态
        maxVolume: '', // 承载体积
        maxNum: '', // 承载上限
        maxWeight: '', // 承载重量
        locationRow: '', // 排
        locationColumn: '', // 列
        locationLayer: '', // 层
        locationLength: '', // 长
        locationWidth: '', // 宽
        locationHigh: '' // 高
        // 一以下可能暂时用不到
        // area: '',
        // address: '',
        // city: ''

      },
      status: [], // 仓库状态
      rules: { // 表单校验规则
        name: [{ required: true, message: '必填' }],
        temperatureType: [{ required: true, message: '必填' }],
        bearingType: [{ required: true, message: '必填' }],
        useType: [{ required: true, message: '必填' }],
        location: [{ required: true, message: '必填', trigger: 'change' }],
        status: [{ required: true, message: '必填' }],
        maxVolume: [{ required: true, message: '必填' }]
      }
    }
  },
  methods: {
    async submit () {
      try {
        if (this.$route.query.id) {
          await this.$refs.addForm.validate()
          await put(this.addinfo)
          this.$message.success('更新成功')
        } else {
          await this.$refs.addForm.validate()
          await add(this.addinfo)
          this.$message.success('新增成功')
        }
      } catch (error) {
        console.log(error)
      } finally {
        this.addinfo = {
          areaId: '', // 最后一项的库区id
          // location: ['798976929725153313', '798977619574915265'], // 完成的仓库/库区数组
          location: null, // 完成的仓库/库区数组
          warehouseId: '', // 仓库id
          name: '', // 库位名称
          code: '', // 库位编码
          temperatureType: '', // 温度
          bearingType: '', // 承重
          useType: '', // 使用
          status: '', // 状态
          maxVolume: '', // 承载体积
          maxNum: '', // 承载上限
          maxWeight: '', // 承载重量
          locationRow: '', // 排
          locationColumn: '', // 列
          locationLayer: '', // 层
          locationLength: '', // 长
          locationWidth: '', // 宽
          locationHigh: '' // 高
        }
        this.seeyou = '请输入'
        this.$refs.addForm.resetFields()
        console.log(1)
        this.backFn()
      }
    },
    backFn () {
      this.$router.back()
    },
    choosechange (a) {
      console.log('当选中节点变化时触发', a)
    }

  },
  watch: {
    'addinfo.location' (a, b) { // 1.级联选择器改变选中状态的钩子
      console.log('检测到location变化了', '前', b, '后', a)
      // if (!this.$route.query.id) {
      console.log('进入判断了')
      this.addinfo.areaId = this.addinfo.location.at(-1)
      this.addinfo.warehouseId = this.addinfo.location[0]
      // }
    }
  }

}
</script>

<style lang="less" scoped>
.seeyou{
  ::-webkit-input-placeholder{
    color: rgb(8, 8, 8);
  }
}
.container{
 min-width: 100%;
 height: 509px;
//  margin: 0 30px;
 padding: 30px;
 background-color: #fff;
 border-radius: 10px;
 box-shadow: 3px 3px  10px gray;
 /deep/.search-top{
  display: flex;
   justify-content: space-between;
 }
 /deep/.search-second{
  display: flex;
  .search-item{
    width:24%;
    margin-right: 1.5%;
  }
  .el-radio.is-focus{
      color: orange;
    }
      .el-radio__inner:hover{
        border: 1px solid orange !important;
      }
      .el-radio__inner{
        border: 1px solid rgb(214, 213, 212) !important;
      }
        .el-radio.is-checked .el-radio__input.is-checked .el-radio__inner {
           border-color: orange;
           background: orange;
        }
         .el-radio.is-checked .el-radio__label {
           color:orange ;
        }
 }
  /deep/.search-item{
    .el-form-item__label{
    text-align: left;
    }
    display: flex;
    flex-direction: column;
    width: 24% !important;
    height: 68px;
    margin-top: 5px;
    // background-color: #fff;
    .el-input__inner{
      background-color: #f3ebebd4!important;
      border:unset !important;
      border-radius: 5px!important;
    }
    .el-input__inner:hover{
      border:1px solid rgb(122, 121, 121) !important;
    }
    .el-input__inner:focus{
      border:1px solid orange!important;
    }
  }
  /deep/.search-down{
    display: flex;
    justify-content: flex-start;
    .search-item{
      width: 24%;
      margin-right: 1.5%;
    }
    .pailieceng,.changkuangao{
      width: 50% !important;
      .el-form-item__content{
        display: flex;
        justify-content: flex-start;
        .el-input{
          width: 30%;
          margin-right:7% ;
        }
      }
    }
  }
  // .down{
  //   justify-content: space-between !important;
  // }
  // /deep/.search-third{
  //   display: flex;
  //   justify-content: space-between;
  //   .search-item.radio-item{
  //     .el-form-item__content{
  //       display: flex;
  //       // align-items: center;
  //     }
  //   }

  //   .el-radio.is-focus{
  //     color: orange;
  //   }
  //     .el-radio__inner:hover{
  //       border: 1px solid orange !important;
  //     }
  //     .el-radio__inner{
  //       border: 1px solid rgb(214, 213, 212) !important;
  //     }
  //       .el-radio.is-checked .el-radio__input.is-checked .el-radio__inner {
  //          border-color: orange;
  //          background: orange;
  //       }
  //        .el-radio.is-checked .el-radio__label {
  //          color:orange ;
  //       }
  // }
  .Btn{
    display: flex;
    justify-content: center;
    margin-top: 10px;
    .el-button{
      width: 170px;
      height: 40px;
      border-radius: 30px;
      border: none;
    }
    .btn1{
      background-color: #f8f5f5;
    }
    .btn1:hover{
      background-color: #ffb200;
      color: black;
    }
    .btn2{
      background-color: #ffb200;
    }
    .btn2:hover{
      background-color: #cb7504;
      color: black;

    }
  }
  .el-popper.el-cascader__dropdown.abc .el-cascader-node:hover{
    color: #e31d26 !important;
    font-weight: 700 !important;
}
}

</style>
